import * as echarts from 'echarts'
import React from 'react'

/**
 * 名称：占比饼图
 * 描述：占比饼图
 * 调用：营销效果中心
 * 输入：store 营销数据
 * 时间：20220404
 */

class RatioItemEchart extends React.Component {
    draw(){
        const {store} = this.props
        const {id,ratioTitle,ratioData,ratioSum} = store
        
        let chartDom = document.getElementById(id);
        let myChart = echarts.init(chartDom);
        let option;
        
        option = {
        backgroundColor: '#2c343c',
        title: {
            text: ratioTitle,
            left: 'center',
            top: 20,
            textStyle: {
            color: '#ccc'
            }
        },
        tooltip: {
            trigger: 'item'
        },
        visualMap: {
            show: false,
            min: 0,
            max: ratioSum,
            inRange: {
            colorLightness: [1, 0.2]
            }
        },
        series: [
            {
            name: 'Access From',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: ratioData && ratioData.sort(function (a, b) {
                return a.value - b.value;
            }),
            roseType: 'radius',
            label: {
                color: 'rgba(255, 255, 255, 0.3)',
                
                normal: {
                    formatter: '{b}\n人数：{c}',
                    overflow: 'none',
                    textStyle: {
                        fontWeight:'normal',
                        fontSize: 8
                    }
                }
            },
            labelLine: {
                lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
            },
            itemStyle: {
                color: '#c23531',
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
            }
        ]
        };

        option && myChart.setOption(option);
    }
  componentDidUpdate() {
        this.draw()
    }
    componentDidMount() {
        this.draw()
    }
render() {
    const {store} = this.props
    const {id} = store
    return (
        <div id={id} style={{ width: '100%', height: "100%" }}></div>
    );
}
}

export default RatioItemEchart